<template>
  <div class="about-section">
    <div class="section-header">
      <h2 class="section-title">关于与更新</h2>
      <p class="section-desc">了解平台信息、版本更新和相关政策</p>
    </div>

    <!-- 版本信息 -->
    <div class="version-card">
      <div class="version-header">
        <div class="version-info">
          <h3 class="app-name">智源工坊</h3>
          <div class="version-details">
            <span class="version-number">v{{ currentVersion }}</span>
            <a-tag color="green">最新版本</a-tag>
          </div>
        </div>
        <div class="app-logo">
          <div class="logo-placeholder">
            <span>智源</span>
          </div>
        </div>
      </div>

      <div class="version-description">
        <p>智源工坊是一个专业的在线学习平台，致力于为用户提供优质的教育资源和学习体验。</p>
        <div class="version-meta">
          <div class="meta-item">
            <span class="meta-label">发布时间：</span>
            <span class="meta-value">{{ releaseDate }}</span>
          </div>
          <div class="meta-item">
            <span class="meta-label">更新大小：</span>
            <span class="meta-value">{{ updateSize }}</span>
          </div>
          <div class="meta-item">
            <span class="meta-label">支持平台：</span>
            <span class="meta-value">Web、iOS、Android</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 更新日志 -->
    <div class="changelog-card">
      <div class="card-header">
        <h3 class="card-title">
          <HistoryOutlined />
          更新日志
        </h3>
        <a-button type="link" @click="showAllChangelog = !showAllChangelog">
          {{ showAllChangelog ? '收起' : '查看全部' }}
        </a-button>
      </div>

      <div class="changelog-list">
        <div
          v-for="(log, index) in displayedChangelog"
          :key="log.version"
          class="changelog-item"
          :class="{ latest: index === 0 }"
        >
          <div class="changelog-header">
            <div class="changelog-version">
              <h4>v{{ log.version }}</h4>
              <a-tag v-if="index === 0" color="blue">最新</a-tag>
            </div>
            <span class="changelog-date">{{ log.date }}</span>
          </div>

          <div class="changelog-content">
            <div v-for="category in log.changes" :key="category.type" class="change-category">
              <h5 class="category-title">
                <component :is="getCategoryIcon(category.type)" />
                {{ getCategoryName(category.type) }}
              </h5>
              <ul class="change-list">
                <li v-for="change in category.items" :key="change">{{ change }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 法律信息 -->
    <div class="legal-card">
      <div class="card-header">
        <h3 class="card-title">
          <FileTextOutlined />
          法律信息
        </h3>
      </div>

      <div class="legal-links">
        <a-row :gutter="16">
          <a-col :span="12" v-for="legal in legalDocuments" :key="legal.key">
            <div class="legal-item" @click="openDocument(legal.key)">
              <div class="legal-icon">
                <component :is="legal.icon" />
              </div>
              <div class="legal-info">
                <h4 class="legal-title">{{ legal.title }}</h4>
                <p class="legal-desc">{{ legal.description }}</p>
                <span class="legal-date">更新时间：{{ legal.updateDate }}</span>
              </div>
              <RightOutlined class="legal-arrow" />
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- 技术支持 -->
    <div class="support-card">
      <div class="card-header">
        <h3 class="card-title">
          <CustomerServiceOutlined />
          技术支持
        </h3>
      </div>

      <div class="support-info">
        <a-row :gutter="24">
          <a-col :span="8">
            <div class="support-item">
              <div class="support-icon">
                <GlobalOutlined />
              </div>
              <div class="support-details">
                <h4>官方网站</h4>
                <p>www.zhiyuan.com</p>
                <a-button type="link" @click="openWebsite">访问</a-button>
              </div>
            </div>
          </a-col>

          <a-col :span="8">
            <div class="support-item">
              <div class="support-icon">
                <MailOutlined />
              </div>
              <div class="support-details">
                <h4>技术支持</h4>
                <p>tech@zhiyuan.com</p>
                <a-button type="link" @click="sendEmail">联系</a-button>
              </div>
            </div>
          </a-col>

          <a-col :span="8">
            <div class="support-item">
              <div class="support-icon">
                <GithubOutlined />
              </div>
              <div class="support-details">
                <h4>开源项目</h4>
                <p>GitHub Repository</p>
                <a-button type="link" @click="openGithub">查看</a-button>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- 版权信息 -->
    <div class="copyright-card">
      <div class="copyright-content">
        <div class="copyright-text">
          <p>© 2024 智源工坊. 保留所有权利.</p>
          <p>本软件受到相关法律法规保护，未经授权不得复制、分发或修改。</p>
        </div>
        <div class="copyright-badges">
          <div class="badge-placeholder">安全认证</div>
          <div class="badge-placeholder">隐私保护</div>
        </div>
      </div>
    </div>

    <!-- 文档查看模态框 -->
    <a-modal
      v-model:open="documentVisible"
      :title="currentDocument?.title"
      width="800px"
      :footer="null"
      class="document-modal"
    >
      <div v-if="currentDocument" class="document-content">
        <div class="document-meta">
          <span>最后更新：{{ currentDocument.updateDate }}</span>
          <a-button type="link" @click="downloadDocument">下载PDF</a-button>
        </div>
        <div class="document-text" v-html="currentDocument.content"></div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { message } from 'ant-design-vue'
import {
  HistoryOutlined,
  FileTextOutlined,
  CustomerServiceOutlined,
  PlusOutlined,
  BugOutlined,
  ToolOutlined,
  SafetyOutlined,
  BookOutlined,
  RightOutlined,
  GlobalOutlined,
  MailOutlined,
  GithubOutlined,
} from '@ant-design/icons-vue'

// 版本信息
const currentVersion = ref('2.1.0')
const releaseDate = ref('2024-01-20')
const updateSize = ref('15.2 MB')

// 更新日志
const showAllChangelog = ref(false)
const changelog = ref([
  {
    version: '2.1.0',
    date: '2024-01-20',
    changes: [
      {
        type: 'feature',
        items: ['新增AI智能推荐功能', '支持多语言切换', '优化用户界面设计'],
      },
      {
        type: 'fix',
        items: ['修复登录页面加载缓慢问题', '解决视频播放卡顿问题', '修复部分浏览器兼容性问题'],
      },
      {
        type: 'improvement',
        items: ['提升系统整体性能', '优化搜索算法', '改进移动端体验'],
      },
    ],
  },
  {
    version: '2.0.5',
    date: '2024-01-10',
    changes: [
      {
        type: 'fix',
        items: ['修复课程进度同步问题', '解决消息推送延迟问题'],
      },
      {
        type: 'improvement',
        items: ['优化数据库查询性能', '改进错误提示信息'],
      },
    ],
  },
  {
    version: '2.0.0',
    date: '2024-01-01',
    changes: [
      {
        type: 'feature',
        items: ['全新的用户界面设计', '新增个人学习计划功能', '支持离线学习模式'],
      },
      {
        type: 'improvement',
        items: ['重构核心架构', '提升系统稳定性', '优化加载速度'],
      },
    ],
  },
])

// 法律文档
const legalDocuments = ref([
  {
    key: 'terms',
    title: '用户协议',
    description: '使用本平台的条款和条件',
    icon: FileTextOutlined,
    updateDate: '2024-01-15',
  },
  {
    key: 'privacy',
    title: '隐私政策',
    description: '个人信息收集和使用说明',
    icon: SafetyOutlined,
    updateDate: '2024-01-15',
  },
  {
    key: 'disclaimer',
    title: '免责声明',
    description: '平台责任范围和限制说明',
    icon: BookOutlined,
    updateDate: '2024-01-10',
  },
  {
    key: 'copyright',
    title: '版权声明',
    description: '知识产权保护相关条款',
    icon: SafetyOutlined,
    updateDate: '2024-01-10',
  },
])

// 文档模态框
const documentVisible = ref(false)
const currentDocument = ref(null)

// 显示的更新日志
const displayedChangelog = computed(() => {
  return showAllChangelog.value ? changelog.value : changelog.value.slice(0, 2)
})

// 获取分类图标
const getCategoryIcon = (type: string) => {
  const icons = {
    feature: PlusOutlined,
    fix: BugOutlined,
    improvement: ToolOutlined,
  }
  return icons[type as keyof typeof icons] || PlusOutlined
}

// 获取分类名称
const getCategoryName = (type: string) => {
  const names = {
    feature: '新功能',
    fix: '问题修复',
    improvement: '优化改进',
  }
  return names[type as keyof typeof names] || '其他'
}

// 打开文档
const openDocument = (key: string) => {
  const doc = legalDocuments.value.find((d) => d.key === key)
  if (doc) {
    currentDocument.value = {
      ...doc,
      content: getDocumentContent(key),
    }
    documentVisible.value = true
  }
}

// 获取文档内容
const getDocumentContent = (key: string) => {
  const contents = {
    terms: `
      <h3>1. 服务条款</h3>
      <p>欢迎使用智源工坊在线学习平台。在使用我们的服务之前，请仔细阅读以下条款...</p>
      <h3>2. 用户责任</h3>
      <p>用户在使用本平台时，应当遵守相关法律法规，不得从事违法违规活动...</p>
      <h3>3. 服务内容</h3>
      <p>本平台提供在线课程、学习资源、互动交流等服务...</p>
    `,
    privacy: `
      <h3>1. 信息收集</h3>
      <p>我们会收集您在使用服务过程中主动提供的信息，包括但不限于...</p>
      <h3>2. 信息使用</h3>
      <p>我们使用收集的信息来提供、维护和改进我们的服务...</p>
      <h3>3. 信息保护</h3>
      <p>我们采用行业标准的安全措施来保护您的个人信息...</p>
    `,
    disclaimer: `
      <h3>1. 服务声明</h3>
      <p>本平台提供的所有内容仅供学习参考，不构成任何形式的建议...</p>
      <h3>2. 责任限制</h3>
      <p>在法律允许的最大范围内，本平台不承担因使用服务而产生的任何损失...</p>
    `,
    copyright: `
      <h3>1. 版权归属</h3>
      <p>本平台的所有内容，包括但不限于文字、图片、音频、视频等，均受版权保护...</p>
      <h3>2. 使用许可</h3>
      <p>用户可以在遵守相关条款的前提下，合理使用平台内容...</p>
    `,
  }
  return contents[key as keyof typeof contents] || '内容加载中...'
}

// 下载文档
const downloadDocument = () => {
  message.info('正在准备下载...')
}

// 打开网站
const openWebsite = () => {
  window.open('https://www.zhiyuan.com', '_blank')
}

// 发送邮件
const sendEmail = () => {
  window.open('mailto:tech@zhiyuan.com')
}

// 打开GitHub
const openGithub = () => {
  window.open('https://github.com/zhiyuan-platform', '_blank')
}
</script>

<style scoped>
.about-section {
  max-width: 900px;
}

.section-header {
  margin-bottom: 24px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.section-desc {
  color: #666;
  margin: 0;
}

.version-card,
.changelog-card,
.legal-card,
.support-card,
.copyright-card {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

.version-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.app-name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.version-details {
  display: flex;
  align-items: center;
  gap: 12px;
}

.version-number {
  font-size: 16px;
  font-weight: 600;
  color: #20a1da;
}

.app-logo .logo-placeholder {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #20a1da 0%, #30a4ad 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 16px;
}

.version-description p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
}

.version-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-label {
  color: #999;
  margin-right: 8px;
}

.meta-value {
  color: #333;
  font-weight: 500;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.changelog-item {
  border-left: 3px solid #f0f0f0;
  padding-left: 16px;
  margin-bottom: 24px;
}

.changelog-item.latest {
  border-left-color: #20a1da;
}

.changelog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.changelog-version {
  display: flex;
  align-items: center;
  gap: 8px;
}

.changelog-version h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.changelog-date {
  color: #999;
  font-size: 14px;
}

.change-category {
  margin-bottom: 16px;
}

.category-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.change-list {
  margin: 0;
  padding-left: 20px;
  color: #666;
}

.change-list li {
  margin-bottom: 4px;
  line-height: 1.5;
}

.legal-links {
  margin-top: 16px;
}

.legal-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}

.legal-item:hover {
  border-color: #20a1da;
  box-shadow: 0 2px 8px rgba(32, 161, 218, 0.1);
}

.legal-icon {
  font-size: 20px;
  color: #20a1da;
  margin-right: 16px;
}

.legal-info {
  flex: 1;
}

.legal-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
}

.legal-desc {
  color: #666;
  margin: 0 0 4px 0;
}

.legal-date {
  color: #999;
  font-size: 12px;
}

.legal-arrow {
  color: #ccc;
}

.support-info {
  margin-top: 16px;
}

.support-item {
  text-align: center;
  padding: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

.support-icon {
  font-size: 32px;
  color: #20a1da;
  margin-bottom: 12px;
}

.support-details h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
}

.support-details p {
  color: #666;
  margin: 0 0 12px 0;
}

.copyright-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copyright-text p {
  color: #666;
  margin: 0 0 4px 0;
  font-size: 14px;
}

.copyright-badges {
  display: flex;
  gap: 12px;
}

.badge-placeholder {
  height: 32px;
  padding: 6px 12px;
  background: #f0f0f0;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}

.document-content {
  max-height: 500px;
  overflow-y: auto;
}

.document-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;
  color: #666;
  font-size: 14px;
}

.document-text {
  line-height: 1.6;
  color: #666;
}

.document-text h3 {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0 12px 0;
}

.document-text p {
  margin-bottom: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .version-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .version-meta {
    flex-direction: column;
    gap: 8px;
  }

  .changelog-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .copyright-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  :deep(.ant-col) {
    width: 100% !important;
    margin-bottom: 16px;
  }
}
</style>
